<template>
  <ToolbarItemContainer ref="container" :iconFile="archiveIcon" title="客户档案" :needBottomPopup="true"
    :iconWidth="isUniFrameWork ? '26px' : '20px'" :iconHeight="isUniFrameWork ? '26px' : '20px'" @click="updateSidebarInfo">
  </ToolbarItemContainer>
</template>
<script setup lang="ts">
import TUIChatEngine, {
  TUIStore,
  StoreName,
  IConversationModel,
} from '@tencentcloud/chat-uikit-engine';
import { ref } from '../../../../adapter-vue';
import ToolbarItemContainer from '../toolbar-item-container/index.vue';
import archiveIconLight from '../../../../assets/icon/archive-light.svg';
import archiveIconDark from '../../../../assets/icon/archive-dark.svg';
import { isUniFrameWork } from '../../../../utils/env';
import TUIChatConfig from '../../config';

import { useSidebarStore } from '@/store/sidebar'

const archiveIcon = TUIChatConfig.getTheme() === 'dark' ? archiveIconDark : archiveIconLight;

const container = ref();
const currentConversation = ref<IConversationModel>();
const sidebarStore = useSidebarStore();


TUIStore.watch(StoreName.CONV, {
  currentConversation: (conversation: IConversationModel) => {
    currentConversation.value = conversation;
  },
});

function updateSidebarInfo() {
  sidebarStore.setSidebar({
    isOpen: true,
    groupInfo: sidebarStore.groupInfo,
    type: 'archive',
    currentId: '',
  });
}
</script>
<style scoped lang="scss" src="./style/index.scss"></style>
